<template>
    <div>
      <div class="sku" @click="displaySku()">
        <div icon="location" is-link style="width:100%">
          <p>选择 <span style="margin-left:7vw;margin-right:4vw;color: #FF4C50;">尺码</span>和 <span style="color: #ff4c50;margin-left:4vw;">颜色</span></p>
        </div>
      </div>
      <van-sku
        v-model="showCustomAction"
        stepper-title="我要买"
        :sku="sku"
        :goods="goods"
        :goods-id="goodsId"
        :hide-stock="sku.hide_stock"
        :quota="quota"
        show-add-cart-btn
        reset-stepper-on-hide
        @buy-clicked="onBuyClicked"
        @add-cart="onAddCartClicked"
      >
        <!-- 自定义 sku-header-price -->
        <template slot="sku-header-price" slot-scope="props">
          <div class="van-sku__goods-price">
            <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span>
          </div>
        </template>
        <!-- 自定义 sku actions -->
        <!--<template slot="sku-actions" slot-scope="props">
          <div class="van-sku-actions">
           &lt;!&ndash; <van-button bottom-action @click="onBuyClicked">积分兑换</van-button>
            &lt;!&ndash; 直接触发 sku 内部事件，通过内部事件执行 onBuyClicked 回调 &ndash;&gt;
            <van-button type="primary" bottom-action @click="onAddCartClicked">买买买</van-button>&ndash;&gt;
          </div>
        </template>-->
      </van-sku>
    </div>
</template>

<script>
    export default {
        name: "sku",
      methods:{
        onAddCartClicked(){
          window.location.href="http://www.napin.com/download.html"
        },
        onBuyClicked(){
          window.location.href="http://www.napin.com/download.html"
        },
        displaySku(){
          this.showCustomAction=!this.showCustomAction;
        }
      },
      data(){
          return{
            disableStepperInput:false,
            closeOnClickOverlay:false,
            resetStepperOnHide:false,
            resetSelectedSkuOnHide:false,
            showCustomAction:false,
            goodsId:1,
            quota:0,
            sku: {
              // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
              // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
              tree: [
                {
                  k: '颜色', // skuKeyName：规格类目名称
                  v: [
                    {
                      id: '1214', // skuValueId：规格值 id
                      name: '红色', // skuValueName：规格值名称
                      imgUrl: 'https://img.yzcdn.cn/1.jpg' // 规格类目图片，只有第一个规格类目可以定义图片
                    },
                    {
                      id: '1215',
                      name: '蓝色',
                      imgUrl: 'https://img.yzcdn.cn/2.jpg'
                    }
                  ],
                  k_s: 's1' // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
                }
              ],
              // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
              list: [
                {
                  id: 2259, // skuId，下单时后端需要
                  price: 100, // 价格（单位分）
                  s1: '1215', // 规格类目 k_s 为 s1 的对应规格值 id
                  s2: '1193', // 规格类目 k_s 为 s2 的对应规格值 id
                  s3: '0', // 最多包含3个规格值，为0表示不存在该规格
                  stock_num: 110 // 当前 sku 组合对应的库存
                }
              ],
              price: '1.00', // 默认价格（单位元）
              stock_num: 227, // 商品总库存
              collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
              none_sku: false, // 是否无规格商品
              messages: [
                {
                  // 商品留言
                  datetime: '0', // 留言类型为 time 时，是否含日期。'1' 表示包含
                  multiple: '0', // 留言类型为 text 时，是否多行文本。'1' 表示多行
                  name: '留言', // 留言名称
                  type: 'text', // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
                  required: '1' // 是否必填 '1' 表示必填
                }
              ],
              hide_stock: false // 是否隐藏剩余库存
            },
            goods: {
              // 商品标题
              title: '测试商品',
              // 默认商品 sku 缩略图
              picture: 'https://img.yzcdn.cn/1.jpg'
            },
            customStepperConfig: {
              // 自定义限购文案
              quotaText: '每次限购xxx件',
              // 自定义步进器超过限制时的回调
              handleOverLimit: (data) => {
                const { action, limitType, quota, quotaUsed } = data;

                if (action === 'minus') {
                  Toast('至少选择一件商品');
                } else if (action === 'plus') {
                  // const { LIMIT_TYPE } = Sku.skuConstants;
                  if (limitType === LIMIT_TYPE.QUOTA_LIMIT) {
                    let msg = `单次限购${quota}件`;
                    if (quotaUsed > 0) msg += `，你已购买${quotaUsed}`;
                    Toast(msg);
                  } else {
                    Toast('库存不够了~~');
                  }
                }
              }
            }
          }
      }
    }
</script>

<style scoped lang="scss">
  .sku{
    width:100%;
    height:13.3vw;
    border-bottom:1px solid #f5f5f5;
  p{
    width:90%;
    margin:0px auto;
    font-size:15px;
    height:13.3vw;
    line-height:13.3vw;
  }
  }
</style>
